@import './variables.scss';

.#{$prefix}-search {
  $__btn-width: 32px;
  $__animate-gap: .25s;
  $__cancel-btn-width: 78px;

  height: $input-height;
  width: $__btn-width;
  display: inline-block;
  vertical-align: middle;
  position: relative;

  .el-button {
    position: absolute;
    top: 0;
  }

  .el-input__prefix {
    left: 0;
    line-height: $input-height;
    width: $__btn-width;

    .el-icon-search {
      padding: 0 12px;
      cursor: pointer;
    }
  }
  .el-input__suffix {
    right: 0;
    line-height: $input-height;
    width: $__btn-width;

    .el-icon-search {
      padding: 0 12px;
      cursor: pointer;
    }

    .el-icon-circle-close {
      // position: absolute;
      // padding: 0;
      // right: 30px;
      // top: -4px;
    }
  }

  .el-autocomplete {
    position: absolute;
    top: 0;
    left: 0;
    // width: $__btn-width;
    visibility: hidden;
    overflow: hidden;
    border-radius: 4px;
    opacity: 0;
  }

  .#{$prefix}-search__mask-input {
    position: absolute;
    left: 0;
    right: $__cancel-btn-width;
    width: 100%;
    transition: all $__animate-gap ease-in-out;
    overflow: hidden;
  }

  .#{$prefix}-search__open-btn {
    left: 0;
    padding: 0 12px;
    opacity: 0;
    color: $clr-font-describe-color;
    width: $__btn-width;
  }

  .#{$prefix}-search__close-btn {
    right: 0;
    opacity: 0;
  }

  .#{$prefix}-search__animate-panel {
    padding-right: $__cancel-btn-width;
    box-sizing: content-box;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    transition: all $__animate-gap ease-in-out;
  }

  &.is-collapsed {
    .#{$prefix}-search__animate-panel {
      width: $__btn-width!important;
      padding-right: 0;
    }

    .#{$prefix}-search__mask-input {
      width: $__btn-width!important;
      border-radius: 4px;
    }

    .#{$prefix}-search__open-btn {
      animation: showStatus .1s linear .2s 1 normal forwards;
      -ms-animation: showStatus .1s linear .2s 1 normal forwards;
    }

    .#{$prefix}-search__close-btn {
      animation: hideStatus .05s linear 0s 1 normal forwards;
      -ms-animation: hideStatus .05s linear 0s 1 normal forwards;
    }
  }

  &.is-expanded {
    .#{$prefix}-search__close-btn {
      animation: showStatus .1s linear .2s 1 normal forwards;
      -ms-animation: showStatus .1s linear .2s 1 normal forwards;
    }

    .#{$prefix}-autocomplete {
      animation: showAutocomplete .2s linear .3s 1 normal forwards;
      -ms-animation: showAutocomplete .2s linear .3s 1 normal forwards;
    }
  }

  &.is-left {
    .#{$prefix}-search__animate-panel {
      left: auto;
      right: 0;
      padding-left: $__cancel-btn-width;
      padding-right: 0;
    }

    .#{$prefix}-search__close-btn {
      left: auto;
      right: 0;
    }

    .#{$prefix}-search__mask-input {
      left: 0;
      right: auto;
    }

    .el-autocomplete {
      left: 0;
      right: auto;
    }

    &.is-collapsed {
      .#{$prefix}-search__animate-panel {
        padding-left: 0;
        overflow: hidden;
      }
    }

    &.is-expanded {
      .#{$prefix}-search__animate-panel{
        z-index: 2;
        overflow: initial;
      }
    }
  }

  &.is-basic {
    width: auto;
    .#{$prefix}-search__open-btn {
      display: none;
    }
    .#{$prefix}-search__animate-panel {
      padding: 0;
    }
  }

  &.#{$prefix}-search--medium {
    height: $input-height;

    .el-button {
      height: $input-height;
      line-height: $input-height - 2px;
    }
    
    .el-input__prefix {
      line-height: $input-height;
    }
    .el-input__suffix {
      line-height: $input-height;
    }
  }

  &.#{$prefix}-search--small {
    height: $input-small-height;

    .el-button {
      height: $input-small-height;
      line-height: $input-small-height - 2px;
    }

    .el-input__suffix {
      line-height: $input-small-height;
    }
    .el-input__prefix {
      line-height: $input-small-height;
    }
  }

  &.#{$prefix}-search--mini {
    height: $input-mini-height;

    .el-button {
      height: $input-mini-height;
      line-height: $input-mini-height - 2px;
    }

    .el-input__suffix {
      line-height: $input-mini-height;
    }
    .el-input__prefix {
      line-height: $input-mini-height;
    }
  }
}

@keyframes showStatus {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes hideStatus {
  from {
    opacity: 1;
  }
  to {
   opacity: 0;
  }
}

@keyframes showAutocomplete {
  from {
    // width: 40;
    visibility: hidden;
    overflow: hidden;
    opacity: 0;
  }
  to {
    // width: 100%;
    visibility: visible;
    overflow: initial;
    opacity: 1;
  }
}
